<template>
  <el-scrollbar ref="scrollbar" style="height: 100%">
    <div class="home-page">
      <div class="favicon">
        <img src="@/assets/images/img/favicon.ico" alt="北京语言大学" title="北京语言大学" class="imgLogo"/>
        <img src="@/assets/images/img/gjj.jpg" alt="语言资源高精尖创新中心" class="imgLogo" title="语言资源高精尖创新中心"/>
        <h3 style="line-height: 50px;">国际中文学生作答系统</h3>
      </div>
      <el-popover
        placement="bottom"
        :width="200"
        trigger="click"
        class="helpInfo"
      >
        <template #reference>
          <div class="helpInfo">
            <el-icon ><Operation /></el-icon>
          </div>
        </template>
        <template #default>
          <li style="display: flex;justify-content: center;align-items: center">
            <a href="https://docs.qq.com/aio/DQnN4UG9EUEJnVXpH?p=WTh0gnTX5lk0DNUddT1Gdq" target="_blank">帮助文档</a>
          </li>
        </template>
      </el-popover>

      <el-container style="height: 100%;">
        <el-main class="home-main">
            <el-row :gutter="15" style="height: 100%;">
                <el-col :xs="0" :sm="8" :md="8" :lg="8" :xl="8" style="height: 100%;">
                    <div class="home-bg"></div>
                </el-col>
                <el-col :xs="0" :sm="7" :md="7" :lg="7" :xl="7">
                    <div id="intro" class="intro">
                        <div class="intro-content">
                            <h3 style="font-weight: 500; letter-spacing: .2vw; color: #1a1a1a">欢迎使用国际中文智慧教学系统</h3>
                            <h4 style="font-weight: 400; letter-spacing: 2.6px; color: rgba(0,0,0,.64)">提质增效，创新国际中文教学新模式</h4>
                          <h4 style="font-weight: 400; letter-spacing: 2.6px; color: rgba(0,0,0,.64)">Welcome chinese learner</h4>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="9" :md="9" :lg="9" :xl="9">
                  <div class="login" style="height:100%; display: flex; flex-direction: column; justify-content: center">
                    <el-card shadow="always" style="width: 29vw; height: 63vh; min-width: 445px; min-height: 551px; display: flex;flex-direction: column; justify-content: center;" type="border-card">
                      <div class="login-dialog" v-if="state.actionType === 'login'">
                        <div class="login-main">
                          <div style="display: flex; justify-content: center; align-items: center; margin-bottom: 20px">
                            <img src="@/assets/images/img/username.png" alt="账号图标" width="24">
                            <span style="margin-left: 5px">学生账号登录</span>
                          </div>

                          <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef">
                            <!-- ref="loginForm" -->
                            <el-form-item prop="username" style="margin-top: 20px">
                              <el-input ref="username" v-model="loginForm.username" placeholder="请输入用户名或邮箱" clearable @keyup.enter="handleLogin(loginFormRef)" style="width: 100%" size="large" />
                            </el-form-item>
                            <el-form-item prop="password">
                              <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" show-password @keyup.enter="handleLogin(loginFormRef)" style="width: 100%" size="large" />
                            </el-form-item>
                            <el-form-item prop="captcha">
                              <el-row>
                                <el-col style="width: 160px; margin-right: 20px" :xs="14" :sm="14" :md="14" :lg="14" :xl="14">
                                  <el-input v-model="loginForm.captcha" placeholder="请输入验证码" clearable @keyup.enter="handleLogin(loginFormRef)" style="width: 100%" size="large" />
                                </el-col>
                                <el-col style="line-height: 16px" :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                                  <el-image ref="captcha" style="cursor: pointer; border-color: #57a3f3" :src="captchaUrl" @click="refreshCaptcha"  height="40px"  alt="验证码图片"/>
                                </el-col>
                              </el-row>
                            </el-form-item>
                            <el-form-item style="margin-top: 30px; margin-bottom: 10px">
                              <el-button class="login-btn-submit" type="primary" size="large" style="border: none; width: 100%" @click="handleLogin(loginFormRef)">{{ login_text }} </el-button>
                            </el-form-item>
                          </el-form>
                          <div class="login-bottom">
                            <div class="login-tip" @click="switchActionType('findPassword')">
                              <span>忘记密码</span>
                              <span>forget password</span>
                            </div>
                            <div class="login-tip" @click="switchActionType('register')">
                              <span>新用户账号注册</span>
                              <span>register</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="login-dialog" v-if="state.actionType === 'register'">
                        <div class="login-main">
                          <div class="login-title">注册</div>
                          <div style="height: 500px">
                            <el-form :model="registerForm" :rules="registerRules" ref="registerFormRef">
                              <el-form-item prop="username" required style="margin-top: 20px">
                                <el-input ref="username" v-model="registerForm.username" placeholder="请输入邮箱" clearable @keyup.enter="handleRegister(registerFormRef)" style="width: 100%" size="large" />
                              </el-form-item>
                              <el-form-item prop="password" required>
                                <el-input v-model="registerForm.password" type="password" placeholder="请输入密码" show-password @keyup.enter="handleRegister(registerFormRef)" style="width: 100%" size="large" />
                              </el-form-item>
                              <el-form-item prop="rePassword">
                                <el-input v-model="registerForm.rePassword" type="password" show-password placeholder="请再次输入密码" autocomplete="off" @keyup.enter="handleRegister(registerFormRef)" style="width: 100%" size="large" />
                              </el-form-item>
                              <el-form-item prop="name">
                                <el-input ref="name" v-model="registerForm.name" placeholder="请输入姓名" clearable @keyup.enter="handleRegister(registerFormRef)" style="width: 100%" size="large" />
                              </el-form-item>
                              <el-form-item prop="mobile">
                                <el-input ref="mobile" v-model="registerForm.mobile" placeholder="请输入手机号" clearable @keyup.enter="handleRegister(registerFormRef)" style="width: 100%" size="large" />
                              </el-form-item>
                              <el-form-item prop="information">
                                <el-input ref="information" v-model="registerForm.information" placeholder="请输入所属机构" clearable @keyup.enter="handleRegister(registerFormRef)" style="width: 100%" size="large" />
                              </el-form-item>
                              <!-- <el-form-item prop="email">
                                  <el-input ref="email" v-model="registerForm.email" placeholder="请输入邮箱" clearable @keyup.enter="handleRegister(registerFormRef)" style="width: 100%" size="large" />
                              </el-form-item> -->
                              <!-- <el-form-item prop="country">
                                  <el-input ref="country" v-model="registerForm.country" placeholder="请输入国籍" clearable @keyup.enter="handleRegister(registerFormRef)" style="width: 100%" size="large" />
                              </el-form-item>-->
                              <el-form-item style="margin-top: 30px; margin-bottom: 10px">
                                <el-button class="login-btn-submit" type="primary" size="large" style="border: none; width: 100%" @click="handleRegister(registerFormRef)">{{ register_text }} </el-button>
                              </el-form-item>
                            </el-form>
                            <div class="login-tip" @click="switchActionType('login')">已有账号？<span>去登录</span></div>
                          </div>

                        </div>
                      </div>
                      <div class="login-dialog" v-else-if="state.actionType === 'findPassword'">
                        <div class="login-main">
                          <div class="login-title">找回密码</div>
                          <el-form
                            :model="form"
                            :rules="rules"
                            ref="ruleFormRef"
                          >
                            <el-form-item :label-width="formLabelWidth" prop="email">
                              <el-input v-model="form.email" autocomplete="off" placeholder="请输入邮箱" />
                            </el-form-item>
                            <el-form-item :label-width="formLabelWidth">
                              <div style="display: flex; justify-content: space-between">
                                <el-input v-model="form.code" autocomplete="off" placeholder="请输入验证码"/>
                                <el-button type="warning" :loading="checkCodeBtn.loading" :disabled="checkCodeBtn.disabled"
                                           @click="getCheckCode" style="margin-left: 5px">
                                  {{ checkCodeBtn.text }}
                                </el-button>
                              </div>
                            </el-form-item>
                            <el-form-item :label-width="formLabelWidth" prop="password">
                              <el-input v-model="form.password" autocomplete="off" placeholder="请输入密码" type="password" />
                            </el-form-item>
                            <el-form-item :label-width="formLabelWidth" prop="passwordAgain">
                              <el-input v-model="form.passwordAgain" placeholder="请确认密码" autocomplete="off" type="password" />
                            </el-form-item>
                          </el-form>
                          <el-button type="primary" @click="findPassword(ruleFormRef)">确认找回</el-button>
                          <div class="login-tip" @click="switchActionType('login')">已有账号？<span>去登录</span></div>
                        </div>
                      </div>
                    </el-card>
                  </div>
                </el-col>
            </el-row>
          <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">

            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">Cancel</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">
                  找回密码
                </el-button>
              </div>
            </template>
          </el-dialog>
        </el-main>
      </el-container>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import {ref,reactive} from 'vue'
import { ElMessage } from 'element-plus';
import {Operation} from '@element-plus/icons-vue'
import Api from "@/api";
import Cookies from "js-cookie";

const router = useRouter();
const route = useRoute(); 

const ruleFormRef = ref()

const dialogFormVisible = ref(false);

let checkCodeBtn = reactive({
  text: '获取验证码',
  loading: false,
  disabled: false,
  duration: 10,
  timer: null
})

// 根据用户名获取验证码
const getCheckCode = async () => {
  // 倒计时期间按钮不能单击
  if (checkCodeBtn.duration !== 10) {
    checkCodeBtn.disabled = true
  }
  // 清除掉定时器
  checkCodeBtn.timer && clearInterval(checkCodeBtn.timer)
  // 获取邮箱验证码
  const data = {
    email: form.email
  }
  const res = await Api.sendEmailCode(data)
  if(res && res.data.code === 200){
    ElMessage({
      type: 'success',
      message: '验证码发送成功，请去邮箱查看'
    })
  }
  // 开启定时器
  checkCodeBtn.timer = setInterval(() => {
    const tmp = checkCodeBtn.duration--
    checkCodeBtn.text = `${tmp}秒`
    if (tmp <= 0) {
      // 清除掉定时器
      clearInterval(checkCodeBtn.timer)
      checkCodeBtn.duration = 10
      checkCodeBtn.text = '重新获取'
      // 设置按钮可以单击
      checkCodeBtn.disabled = false
    }
  }, 1000)
}

const findPassword = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
        const data = {
          userName: form.email,
          code: form.code,
          password: form.password
        }
        const res = await Api.updatePassword(data)
        if (res && res.data.code === 200) {
          ElMessage({
            type: 'success',
            message: '密码修改成功'
          })
          setTimeout(() => {
            switchActionType('login')
          }, 1000)
        }
    } else {
      ElMessage({
        type: 'error',
        message: '密码修改失败'
      })
    }
  })
}


const rules = reactive({
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      type: 'string',
      min: 6,
      message: '密码不能少于6个字符且不能大于20个字符',
      trigger: 'blur',
    },
  ],
  passwordAgain: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== form.password) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    },
  ],
  email: [
    {
      required: true,
      message: '请输入邮箱地址',
      trigger: 'blur',
    },
    {
      type: 'email',
      message: '请输入正确的邮箱地址',
      trigger: ['blur', 'change'],
    },
  ],
})

const form = reactive({
  email: '',
  code: '',
  password: '',
  passwordAgain: '',
})
const scrollbar = ref(null);

const state = reactive({
  actionType: 'login',
  loginMethod: 'default',
  appId: '',
  quickLoginAppId: '',
  callbackUrl: '',
  isGetWxConfig: true,
  toPerfectInfo: false,
  isMobile: false
});

const loginFormRef = ref(null);
const loginForm = reactive({
  username: '',
  password: '',
  captcha: '',
  codeKey: '',
  keeplogin: [],
  token: '',
});
const loginRules = reactive({
  username: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    {
      type: 'string',
      min: 3,
      message: '用户名不能少于3个字符且不能大于30个字符',
      trigger: 'blur',
    },
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    {
      type: 'string',
      min: 6,
      message: '密码不能少于6个字符且不能大于20个字符',
      trigger: 'blur',
    },
  ],
  captcha: [{ required: true, message: '验证码不能为空', trigger: 'blur' }],
});

const registerFormRef = ref(null);
const registerForm = reactive({
  username: '',
  password: '',
  rePassword: '',
  mobile: '',
  name: '',
  //country: '',
  information: '',
});
const registerRules = reactive({
    username: [
      { required: true, message: '请输入邮箱', trigger: 'blur' },
      {
          type: 'email',
          message: '请输入正确的邮箱',
          trigger: ['blur', 'change'],
      },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        {
        type: 'string',
        min: 6,
        message: '密码不能少于6个字符且不能大于20个字符',
        trigger: 'blur',
        },
    ],
    rePassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        { 
          validator: (rule, value, callback) => {
            if (value !== registerForm.password) {
                callback(new Error('两次输入的密码不一致'));
            } else {
                callback();
            }
          },
          trigger: 'blur'
        },
    ],
    mobile: [
        //{ required: true, message: '请输入手机号', trigger: 'blur' },
        {
          pattern: /^\d+-?\d{5,10}$/,
            message: '请输入正确的手机号', 
            trigger: 'blur' 
        },
    ],
});
const loading = ref(false);
const redirect = ref(undefined);
const login_text = ref('登录');
const register_text = ref('注册');
let captchaUrl = ref('');

onMounted(() => {
  Cookies.remove('token');
  let token = localStorage.getItem('token');
  if(!isMobileFn()){
    if (token) {
      router.push('/system');
    }
    refreshCaptcha();
    // setTimeout(function() {
    //   getWxConfig();
    // }, 200);
  } else {
    const urlParams = new URLSearchParams(window.location.search);
    const code = route.query.code || urlParams.get("code");
    console.log("挂载", code, token);
    if(code){
      handleWxLogin(code);
    } else {
      if (token) {
        router.push('/system');
      }
      refreshCaptcha();
      setTimeout(function() {
        getWxConfig();
      }, 200);
    }
  }
  
});

onBeforeRouteUpdate(async () => {
  await refreshCaptcha()
});

const getWxConfig = async () => {
    const protocol = window.location.protocol;
    const hostname = window.location.hostname;
    //console.log(`${protocol}//${hostname}/#/`);
    state.callbackUrl = `${protocol}//${hostname}/#/`;
    // state.isMobile = isMobileFn();
    // state.callbackUrl = "https://cnlp.blcu.edu.cn/#/";
    try {
        if(isMobileFn()){
          const res = await getQuickWxAuth();
          state.quickLoginAppId = res.data.data.appId;
          wxLoginCallBack();
        } else {
          const res = await getWxAuth();
          state.appId = res.data.data.appId;
          getWxLoginQr();
        }
        // const res = await getWxAuth();
        // state.appId = res.data.data.appId;
        // getWxLoginQr();
    } catch (error) {
      state.isGetWxConfig = false;  
      console.log(error);
    }
};
  const isMobileFn = () => {
    let userAgentInfo = navigator.userAgent;
    let Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
    let getArr = Agents.filter(i => userAgentInfo.includes(i));
    return getArr.length ? true : false;
  }
  const wxLoginCallBack = function () {
    // let protocol = window.location.protocol;
    // let host = window.location.host;
    let redirect_uri = state.callbackUrl.split("#")[0];
    let appId = state.quickLoginAppId; //公众号AppID
    let wxUrlStart = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appId + '&redirect_uri=';
    let wxUrlEnd = '&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect';
    let allUrl = wxUrlStart + encodeURIComponent(redirect_uri) + wxUrlEnd;
    window.location.replace(allUrl);
  }
const getWxLoginQr = () => {
    new WxLogin({
        id: 'login-qr',
        appid: state.appId,
        scope: 'snsapi_login',
        redirect_uri: encodeURIComponent(state.callbackUrl),
        state: Math.ceil(Math.random() * 1000),   
        style: 'black',     
        // 自定义样式链接   
        href: '',
        fast_login: 0 
    });
};

const handleTabClick = (tab) => {
    if (tab.props.name === 'wechat') {
        getWxConfig();
    } else {
      refreshCaptcha();
    }

};

const handleLogin = async (formRef) => {
  //console.log(formRef);
  try {
    const valid = await formRef.validate();
    if (valid) {
      const param = {
        userName: loginForm.username,
        password: loginForm.password,
        captcha: loginForm.captcha,
        codeKey: loginForm.codeKey,
        type: 'pc',
      };
      //console.log(param);
      await refreshCaptcha();
      const res = await Api.login(param);
      if (res && res.data.code === 200) {
        console.log(res.data.data);
        let data = {
            id: res.data.data.id,
            name: res.data.data.name,
            avatar: res.data.data.avatar,
            mobile: res.data.data.user ? res.data.data.user.mobile : '',
            email: res.data.data.user ? res.data.data.user.email : '',
            information: res.data.data.user ? res.data.data.user.information : '',
            userName: res.data.data.user ? res.data.data.user.userName : '',
            token: res.data.data.jwtToken,
            roleId: res.data.data.roleId,
            roleName: res.data.data.roleName,
            orgId: res.data.data.user ? res.data.data.user.orgId : 0,
        };
        if(data.name === '' || (data.mobile === '' && data.email === '')){
          state.toPerfectInfo = true;
        }
        Cookies.set('token', data.token);
        console.log("登录成功", data);
        await router.push("/system")
      }
    } else {
        console.log('error submit!!');
        return false;
    }
  } catch (error) {
    // 处理可能出现的错误
  }
};

const handleWxLogin = async (code) => {
    let params = { code: code };
    try {
        let res = {};
        if(isMobileFn()){
          res = await wxQuickLogin(params);
        } else {
          res = await wxLogin(params);
        }
        // res = await wxLogin(params);
        if (res && res.data.code === 200) {
            let data = {
                id: res.data.data.id,
                name: res.data.data.name,
                avatar: res.data.data.avatar,
                mobile: res.data.data.user ? res.data.data.user.mobile : '',
                email: res.data.data.user ? res.data.data.user.email : '',
                information: res.data.data.user ? res.data.data.user.information : '',
                userName: res.data.data.user ? res.data.data.user.userName : '',
                token: res.data.data.jwtToken,
                roleId: res.data.data.roleId,
                roleName: res.data.data.roleName,
                orgId: res.data.data.user ? res.data.data.user.orgId : 0,
            };
            if(data.name === '' || (data.mobile === '' && data.email === '')){
                state.toPerfectInfo = true;
            }
            userStore.dataFill(data);
            route.push({path: '/courses',query: {toPerfectInfo: state.toPerfectInfo}});
        }
    } catch (error) {
        console.log(error);
    }
};

watchEffect(() => {
  redirect.value = router.currentRoute.value.query.redirect;
  // console.log(myRef.value);
});

// const refreshCaptcha = async () => {
//   const res = await Api.generateValidateCode();
//   if (res.data.data && res.data.data.code === 200) {
//     captchaUrl.value = res.data.data.data.codeValue;
//     loginForm.codeKey = res.data.data.data.codeKey;
//   }
// };
const refreshCaptcha = async () => {
  const res = await Api.generateValidateCode();
  if (res && res.data.code === 200) {
    let codeValue = res.data.data.codeValue;
    // 如果是 Base64 数据，拼接 data:image/png;base64,
    if (codeValue.startsWith('/')) {
      // captchaUrl.value = `data:image/png;base64,${codeValue}`;
    } else {
      await nextTick(() => {
        captchaUrl.value = codeValue;
      })
    }
    loginForm.codeKey = res.data.data.codeKey;
  }
};



const switchActionType = (e) => {
    state.actionType = e;
    // if(e == 'login'){
    //   getWxConfig();
    // }
};

const handleRegister = async (formRef) => {
    //console.log(formRef);
    try {
      const valid = await formRef.validate();
      if (valid) {
        const param = {
            userName: registerForm.username,
            password: registerForm.password,
            mobile: registerForm.mobile,
            name: registerForm.name,
            information: registerForm.information,
        };
        //console.log(param);
        const res = await Api.register(param);
        if (res && res.data.code === 200) {
          switchActionType('login');
          registerForm.username = '';
          registerForm.password = '';
          registerForm.rePassword = '';
          registerForm.name = '';
          registerForm.mobile = '';
          registerForm.information = '';
          ElMessage({
              type: 'success',
              message: '注册成功，请登录',
          });
        }
      } else {
        console.log('error submit!!');
        return false;
      }
    } catch (error) {
        // 处理可能出现的错误
    }
};

</script>
<style scoped lang="scss">
.home-page {
  background-color: #fff;
  height: 100vh;
  position: relative;
  background: url('@/assets/images/img/LoginBg.png') no-repeat 50%;
  background-size: cover;
  .favicon {
    height: 50px;
    display: flex;
    position: absolute;
    top: 10px;
    left: 100px;
    width: 300px;
  }
  .helpInfo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 30px;
    position: absolute;
    top: 20px;
    font-size: 25px;
    right: 50px;
    z-index: 100;
    color: #454d5a;
  }
  .helpInfo:hover {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 30px;
    position: absolute;
    top: 20px;
    font-size: 25px;
    right: 50px;
    z-index: 100;
    background-color: rgba(0, 0, 0, .08);
  }


  .home-main {
    
    .home-bg {
        background: url('@/assets/images/img/home-bg.png') no-repeat;
        background-size: contain;
        background-position: center;
        height: 100%;
    }
  }

  .intro {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

    .intro-content {
      font-size: 18px;
      width: 100%;
      padding: 45px 25px;
      border-left: 1px solid #f4f4f4;
    }
  }

  

  :deep(.login-dialog) {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

    .el-tabs {
        width: 100%;
        max-width: 500px;
    }
    .el-tabs__nav {
        float: none;

        .el-tabs__item {
            width: 50%;
            font-size: 16px;
        }

        .el-tabs__item.is-active {
            border-bottom-color: transparent;
        }
    }
    .login-main {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 85%;
      min-width: 290px;

      .tabContent:nth-of-type(1) {
        height: 310px;
        min-width: 280px;
      }
      .tabContent:nth-of-type(2) {
        height: 300px;
        min-width: 280px;
      }
      .login-title {
        font-size: 24px;
        font-weight: 500;
        color: #2e3a59;
        text-align: center;
        margin-bottom: 15px;
      }
      .login-bottom {
        display: flex;
        justify-content: space-between;
      }
      .login-tip {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        text-align: right;
        cursor: pointer;
        margin-bottom: 15px;

        span {
            color: #006ac9;
        }
      }

      .login-qr {
        text-align: center;
        margin-top: 10px;

        .login-qr-tip {
          width: 100%;
          height: 200px;
          display: flex;
          justify-content: center;
          align-items: center;
          .qr-tip {
            border: 1px solid #e2e2e2;
            width: 202px;
            height: 202px;
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;
          }
        }
      }

      .el-form-item {
        margin-bottom: 25px;
      }

      .login-btn-submit {
        background-color: #3366ff;
      }


    }
  }

  
}

:deep(.el-scrollbar__wrap) {
  overflow-x: hidden !important;
}
</style>
